<template>
	<view class="content">
		<view class="shops u-flex">
			<view class="shop-item u-flex"  v-for="(item,index) in shoplist.data" :key="index"
		@tap="changeTab(index)">
				<view :class="shoplist.currentIndex==index?'select_color':'no_select'">{{item.name}}</view>
				<view class="item">
					<view class="iconfonts">
						<image src="../../static/jiantou_up.png" mode=""></image>
						<image src="../../static/jiantou_down.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"shoplist":{
					currentIndex:0,
					data:[
						{name:'价格',status:1},
						{name:'折扣',status:0},
						{name:'品牌',status:0},
					]
				},
			}
		},
		methods:{
			changeTab(index){
				this.shoplist.currentIndex = index
				console.log(this.shoplist.currentIndex);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #eeeeee;
		// padding-bottom: 40rpx;
	}

	.shops {
		display: flex;

		.shop-item {
			width: 200rpx;
			height: 60rpx;
			margin: 20rpx auto;
			// background-color: red;
			justify-content: center;
			.no_select{
				font-size: 32rpx;
			}
			.select_color{
				color: red;
				font-size: 32rpx;
			}

			.iconfonts {
				image {
					display: block;
					width: 20rpx;
					height: 20rpx;
					padding-left: 10rpx;
				}

				.pinpai {
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
	}
</style>
